<script setup lang="ts">
    import * as d3 from 'd3';
    import { reactive,onMounted,useTemplateRef } from 'vue';
    import * as Plot from "@observablehq/plot";
    
    const chartBox = useTemplateRef('chart1');

    onMounted(()=>{
        drawChart();
    })

    const drawChart = () => {
        const nodes = [
            { id: 1, name: '刘备', type: '皇上' },
            { id: 2, name: '关羽', type: '将军' },
            { id: 3, name: '张飞', type: '将军' },
            { id: 4, name: '诸葛亮', type: '丞相' },
            { id: 5, name: '小兵1', type: '士兵' },
            { id: 6, name: '小兵2', type: '士兵' },
        ];

        const width = 600;
        const height = 400;
        const svg = d3.select(chartBox.value)
            .append('svg')
            .attr('width', width)
            .attr('height', height);
        const g = svg.append('g');

        const node = g.selectAll('.node')
        .data(nodes)
        .enter()
        .append('circle')
        .attr('r', 18)
        .attr('fill', 'steelblue')
        .style('fill', 'blue')
    }


    
</script>
<template>
  <div ref="chart1" class="graph"></div>
</template>
<style scoped>
.graph {
  background-color: #d1e9ff;
}
</style>